<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>教育资源-教师资源</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/mailList.css">
</head>
<body>
<div id ="header" ></div>
<div class="mailListBg">
	<div class="mailListMid">
		<p class="pTit">
			班级信息
			<a class="labelNew" href="##">标签</a>
		</p>
		<div class="bigNav">
			
		</div>
		<div class="content11 onCont">
			<p class="titS">
				<span class="oneTit">我关注的</span>
				<span class="aLink">
					<a class="act">全部</a>
					<a>教师</a>
					<a >学生</a>
					<a href="">家长</a>
				</span>
				<a class="searchList">
					按照首字母筛选
					<i></i>
				</a>
			</p>
			<p class="letterLine">
				<label for="">姓名首字母:</label>
				<a href="javascript:void(0);" class="on" onclick="letter('');">全部</a>
				<a href="javascript:void(0);" onclick="letter('a');">A</a>
				<a href="javascript:void(0);" onclick="letter('a');">B</a>
				<a href="javascript:void(0);" onclick="letter('a');">C</a>
				<a href="javascript:void(0);" onclick="letter('a');">D</a>
				<a href="javascript:void(0);" onclick="letter('a');">E</a>
				<a href="javascript:void(0);" onclick="letter('a');">F</a>
				<a href="javascript:void(0);" onclick="letter('a');">G</a>
				<a href="javascript:void(0);" onclick="letter('a');">H</a>
				<a href="javascript:void(0);" onclick="letter('a');">I</a>
				<a href="javascript:void(0);" onclick="letter('a');">J</a>
				<a href="javascript:void(0);" onclick="letter('a');">K</a>
				<a href="javascript:void(0);" onclick="letter('a');">L</a>
				<a href="javascript:void(0);" onclick="letter('a');">M</a>
				<a href="javascript:void(0);" onclick="letter('a');">N</a>
				<a href="javascript:void(0);" onclick="letter('a');">O</a>
				<a href="javascript:void(0);" onclick="letter('a');">P</a>
				<a href="javascript:void(0);" onclick="letter('a');">Q</a>
				<a href="javascript:void(0);" onclick="letter('a');">R</a>
				<a href="javascript:void(0);" onclick="letter('a');">S</a>
				<a href="javascript:void(0);" onclick="letter('a');">T</a>
				<a href="javascript:void(0);" onclick="letter('a');">U</a>
				<a href="javascript:void(0);" onclick="letter('a');">V</a>
				<a href="javascript:void(0);" onclick="letter('a');">W</a>
				<a href="javascript:void(0);" onclick="letter('a');">X</a>
				<a href="javascript:void(0);" onclick="letter('a');">Y</a>
				<a href="javascript:void(0);" onclick="letter('a');">Z</a>
			</p>
			<ul class="contact clearfix scrollBar">
				<li>
					<div class="topCon">
						<a class="detail" >详情</a>
						<a class="headLink" >
							<img src="./imgs/dengziqi.jpg"  class="logo" alt="">
						</a >
						<a  class="nameNew" >邓紫棋</a>
						<a  class=""></a>
					</div>
					<div class="botCon">
						<a class="titP">
							复旦大学第一附属小学
						</a>
						<span href="" class="noAssess">暂无好友对其评价！</span>
						<a  class="cancleNotice">取消关注</a>
					</div>
				</li>

			</ul>
		</div>
	</div>
</div>
<!-- 详情页面制作 -->
<div class="midDtail" style="display:none"></div>
<div class="footerBot"></div>
<script src="./js/jquery.js"></script>
<script src="./js/fxtpl.plus.js"></script>
<link rel="stylesheet" href="./webupload/webuploader.css">
<script src="./webupload/webuploader.js"></script>
<script src="./webupload/upload.js"></script>
<script src="./layui/layui.all.js"></script>
<link rel="stylesheet" href="./layui/css/layui.css">
<script>
	 var numSpace = {numSpace:6};
	 var header = Fxtpl.render('./weight/headerAll.html',numSpace);
	 $('#header').html(header);
	 // header click
	 $(".trigle").on("click",function(){
	 	if($(this).siblings(".showHide").hasClass("show")){
	 		$(this).siblings(".showHide").removeClass("show");
	 	}else{
	 		$(this).siblings(".showHide").addClass("show");
	 	}
	 });
 	// tapclick
	 $(".pTit .content a").on("click",function(){
	 		var num = $(".pTit .content a").index($(this));
	 		$(".content a").each(function(){
	 			$(this).removeClass("on");
	 		});
	 		$(".content a").eq(num).addClass("on");
	 		//content 下的对应显示
	 		$(".content11").each(function(){
	 			$(this).removeClass("onCont");
	 		});
	 		$(".content11").eq(num).addClass("onCont");
	 });
	// click  btn按钮
	$(".titS .searchList").on("click",function(){
		if($(".letterLine").css("display")=="none"){
			$(".letterLine").css("display","block");
		}else if($(".letterLine").css("display")=="block"){
			$(".letterLine").css("display","none");
		}
	});
	// mid click 里面的东西
	var tagContent= '<div class="diaglarAlert">'
	    tagContent += '<div class="headerTop clearfix">';
		tagContent += '<a class="mar15 act">我的标签</a>';
		tagContent += '<a >我的联系人</a>';
		tagContent += '</div>';
		tagContent += '<div class="tagTabCon act">';
		tagContent += '<ul class="ulmost">';
			tagContent += '<li><span>4444</span><em class="delBtn"></em></li>';
			tagContent += '<li><span>4444</span><em class="delBtn"></em></li>';
			tagContent += '<li><span>4444</span><em class="delBtn"></em></li>';
		tagContent += '</ul>';
		tagContent += '<p class="tipsInfo">提示：个人最多拥有5个标签</p>';
		tagContent += '</div>';
		tagContent += '<div class="tagTabCon">';
			tagContent += '<p class="listTit">大家对我的印象是：制作好的</p>';
		tagContent += '</div>';
		tagContent +='</div>';
	    $(".pTit .labelNew").on("click",function(){
	    	 bindClick();
	    	layer.open({
	    	  type: 1,
	    	  title:"我的标签",
	    	  area: ['600px', '360px'],
	    	  shadeClose: true, //点击遮罩关闭
	    	  content:tagContent,
	    	});
	    });
	    // 标签里面事件绑定
	    function bindClick(){
		    $(document).on('click','.diaglarAlert .headerTop a',function(){
	    		$(".headerTop a").each(function(){
	    			$(this).removeClass("act");
	    		});
	    		$(this).addClass("act");
	    		var num =$(this).index();
	    		$(".diaglarAlert .tagTabCon").each(function(){
	    			$(this).removeClass("act");
	    		});
		    	$(".diaglarAlert .tagTabCon").eq(num).addClass("act");
		    });
	    }
	    $(document).on('click','.layui-layer-close',function(){
	    	offClick();
	    });
	    function offClick(){
		    $(document).off('click','.diaglarAlert .headerTop a',function(){
	    		$(".headerTop a").each(function(){
	    			$(this).removeClass("act");
	    		});
	    		$(this).addClass("act");
	    		var num =$(this).index();
	    		$(".diaglarAlert .tagTabCon").each(function(){
	    			$(this).removeClass("act");
	    		});
		    	$(".diaglarAlert .tagTabCon").eq(num).addClass("act");
		    });
	    }


	    // 关闭按钮
	    // $(document).on('click','.btnLine .cancal',function(){
	    // 	layer.close(layer.index)
	    // });

		// $(".headerTop a").on("click",function(){
		// 	$(".headerTop a").each(function(){
		// 		$(this).removeClass("act");
		// 	});
		// 	$(this).addClass("act");
		// 	var num =$(this).index();
		// 	$(".diaglarAlert .tagTabCon").each(function(){
		// 		$(this).removeClass("act");
		// 	});
		// 	$(".diaglarAlert .tagTabCon").eq(num).addClass("act");
		// });

		// $(".ulmost li .delBtn").on("click",function(){
		// 	layer.msg('删除成功');
		// });

		// console.log("到请求的这个地方了44444");
		// console.log("到了这个maillist这个里面了11111");
		$(".topCon .detail").on("click",function(){
			// 点击关闭的按钮了
			// console.log("点击到关闭按钮4444");
			console.log("guanbianniu");
		});


</script>
</body>	
</html>